<article>
	<h1><?php echo $GLOBALS['title'] ?></h1>
	<p>CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。</p>
	<h3>背景色</h3>
	<p>可以使用 <code>background-color</code>属性为元素设置背景色。这个属性接受任何合法的颜色值。</p>
	<p>这条规则把元素的背景设置为灰色：</p>
	<pre><code><?php echo htmlspecialchars('p {background-color: gray;}') ?></code></pre>
	<h3>背景图像</h3>
	<p>要把图像放入背景，需要使用 <code>background-image</code> 属性。<code>background-image</code> 属性的默认值是 <code>none</code>，表示背景上没有放置任何图像。</p>
	<p>如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：</p>
	<pre><code><?php echo htmlspecialchars('body {background-image: url(/i/eg_bg_04.gif);}') ?></code></pre>
	<h3>背景重复</h3>
	<p>如果需要在页面上对背景图像进行平铺，可以使用 <code>background-repeat</code> 属性。</p>
	<p>属性值 <code>repeat</code> 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。<code>repeat-x</code> 和 <code>repeat-y</code> 分别导致图像只在水平或垂直方向上重复，<code>no-repeat</code> 则不允许图像在任何方向上平铺。
</p><p>默认地，背景图像将从一个元素的左上角开始。请看下面的例子</p>
	<pre><code><?php echo htmlspecialchars('
body{ 
  	background-image: url(/i/eg_bg_03.gif);
  	background-repeat: repeat-y;
  }') ?></code></pre>
  	<h3>背景定位(图片精灵)</h3>
	<p>可以利用 <code>background-position</code> 属性改变图像在背景中的位置。</p>
	<p>下面的例子在 <code>body</code> 元素中将一个背景图像居中放置：</p>
	<pre><code><?php echo htmlspecialchars('
body
  { 
    background-image:url("/i/eg_bg_03.gif");
    background-repeat:no-repeat;
    background-position:center;
	/*位置(top,center,bottom,right,left)*/
	/*百分数值(50% 50%;)*/
	/*长度值(50px 100px)*/
  }') ?></code></pre>
  	<h3>css背景缩写</h3>
  	<pre><code><?php echo htmlspecialchars('
<style type="text/css">
	p{background: #fff url() 0 0 no-repeat;}
</style>') ?></code></pre>
  	
</article>
